<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			搜索
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height+50 + 'px'}" class="search-conten">
			<view class="search-box" :style="{top: vuex_custom_bar_height + 'px'}">
				<tn-input class="search-input" v-model="title" />
				<view class="search-btn" @click="search">搜索</view>
			</view>
			<view class="favorites-box" >
				<view class="favorites-name">
					<span style="font-size: 32rpx;margin-right: 10rpx;"><text class="tn-icon-video-square"></text>
					</span>
					讲座医生
				</view>
				<view class="collect-switch" @click="moreContent('Doc')">
					<!-- <span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-deploy-fill"></text></span>
						展开 -->
					{{content.expertResultData.total || '0'}}个内容<text class="tn-icon-right"></text>
				</view>
			</view>
			<view class="collect-list-box" style="padding: 0 20rpx;">
				<view class="update-list" v-for="(item,index) in content.expertResultData.list" :key="index" @click="toDetails(item.id)">
					<!-- doc-liveing -->
					<view class="doc-left">
						<image class="doc-img" :src="item.avatar"></image>
						<!-- <view class="live-active">直播中</view> -->
					</view>
					<view class="doc-info">
						<view class="doc-name">{{item.name}}
							<apsn style="font-size: 24rpx;color: #999999;margin-left: 10rpx;">{{item.department}}</apsn>
						</view>
						<view style="font-size: 24rpx;color: #999999;">{{item.hospital}}</view>
					</view>

				</view>
			</view>
			<view class="favorites-box">
				<view class="favorites-name">
					<span style="font-size: 32rpx;margin-right: 10rpx;"><text class="tn-icon-video-square"></text>
					</span>
					讲座视频
				</view>
				<view class="collect-switch" @click="moreContent('Live')">
					<!-- <span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-deploy-fill"></text></span>
							展开 -->
					{{content.liveResultData.total || '0'}}个内容<text class="tn-icon-right"></text>
				</view>
			</view>
			<view class="collect-list-box">
				<preview-list :dataList="content.liveResultData.list" @refreshLive="getlive"></preview-list>
			</view>
			<view style="border-radius: 20rpx;overflow: hidden;margin-bottom: 20rpx;">
				<view class="favorites-box">
					<view class="favorites-name">
						<span style="font-size: 30rpx;margin-right: 10rpx;"><text class="tn-icon-search-list"></text>
						</span>
						微课堂
					</view>
					<view class="collect-switch" @click="moreContent('Tw')">
						<!-- <span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-deploy-fill"></text></span>
							展开 -->
						{{content.contentsResultData.total || '0'}}个内容<text class="tn-icon-right"></text>
					</view>
				</view>
				<view class="collect-list-box">
					<content-list ref="contentList" :dataList='content.contentsResultData.list'></content-list>
				</view>
			</view>

			<!-- <tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more> -->
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="search"
				v-if="content.length == 0"></tn-empty>
		</view>
	</view>
</template>

<script>
	import {
		contentsWithSearch
	} from '@/util/index.js'
	export default {
		data() {
			return {
				title: '',
				page: 1,
				limit: 5,
				content: [],
				loadStatus: 'more', // 加载状态：more|loading|noMore
			};
		},
		onLoad(option) {
			this.title = option.title
			this.getSeach()
		},
		methods: {
			search() {
				this.page = 1
				this.limit = 5
				this.content = []
				this.getSeach()
			},
			getSeach() {
				if(!this.title){
					uni.showToast({
						title:'请输入要搜索的内容后再试！',
						icon:'none'
					})
					return
				}
				contentsWithSearch({
					page: this.page,
					limit: this.limit,
					title: this.title
				}).then((res) => {
					this.content = res
					this.loadStatus = 'noMore'
				})
			},
			moreContent(type){
				uni.redirectTo({
					url: `./search-list-more?title=${this.title}&type=${type}`
				})
			},
			toDetails(v) {
				uni.navigateTo({
					url: `/templatePage/expert-info/expert-info?id=${v}`
				})
			},

		}
	}
</script>

<style lang="less">
	.search-conten {}

	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 20rpx 20rpx;
		position: fixed;
		background-color: #FFFFFF;

		.search-input {
			padding: 0 40rpx;
			font-size: 34rpx;
			flex: 1;
			background-color: #eeeeee;
			border-radius: 40rpx;
			margin-right: 20rpx;
		}

		.search-btn {
			background-color: #FFFFFF;
			width: 150rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #01BEFF;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.load-more {
		padding: 20rpx;
	}

	.favorites-box {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;

		.favorites-name {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}

		.collect-switch {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.collect-list-box {
		width: 100%;
		// padding:10rpx 0;
		overflow: hidden;
		// background-color: #eeeeee;
	}

	.update-list {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.doc-left {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			// position: relative;
			overflow: hidden;
			flex: 0 0 100rpx;
			margin-right: 20rpx;

			.doc-img {
				width: 100%;
				height: 100%;
			}

			// .doc-liveing {
			// 	border: 4rpx solid #EB4869;
			// }

			.doc-info {
				flex: 1;
				margin-left: 20rpx;

				.doc-name {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}
</style>
